/*
 * @Author: lwHao
 * @Date: 2020-07-12 15:34:18
 * @LastEditors: lwHao
 * @LastEditTime: 2020-07-18 23:05:58
 */
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//通过webpack输出Html, 每个HtmlWebpackPlugin用于生成一个html页面
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 拷贝文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MyPlugin =  require('../myPlugin/index.js')
// HMR 插件 webpack.HotModuleReplacementPlugin
const webpack = require('webpack')
// 提取css样式到单独的文件中，实现样式的按需加载,建议css文件超过150kb左右使用
const MiniCssExtraPlugin = require('mini-css-extract-plugin')
// 压缩输出的css文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// webpack内置的js压缩插件
const TeserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: 'none',
  // entry: './src/main.js',
  // 多入口打包
  entry: {
    main: './src/main.js',
    editer: './src/editer.js',
  },
  output: {
    // filename: 'bundle.js',
    filename: '[name]-[hash].bundle.js', // 多入口打包输出文件名配置
    path: path.join(__dirname, 'dist'),
    // publicPath: 'dist/'
  },
  // 启用tree-shaking功能,但是tree-shaking对commonjs不生效
  optimization: {
    // 输出结果中只导出外部使用了的成员
    usedExports: true,
    minimize: true,// 压缩代码，去掉没有用到的代码
    concatenateModules: true,// 尽可能合并每一个模块到一个函数中
    // sideEffects: true // 副作用
    splitChunks: { // 提取公共模块配置
      chunks: 'all' // 把所有公共模块提取到一个文件中
    },
    // 只会在minimize开启时工作
    minimizer:[
      new OptimizeCssAssetsWebpackPlugin(),
      new TeserWebpackPlugin() // 解决使用自定义css压缩后js代码不压缩的问题
    ]

  },
  // 配置开发过程中的辅助工具 sourceMap相关的配置
  devtool: 'source-map',
  devServer:{ // 为webpack-dev-server指定相关配置选项
    // 指定额外的静态资源路径,字符串或数组
    contentBase: ['./public'],
    // 添加代理服务配置
    proxy: {
      // 前缀
      '/api':{ 
        // 代理规则
        // 代理目标 http:localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https//api.github.com',
        // 实现代理路径重写
        // https://api.github.com/api/users -> https://api.github.com/users
        pathRewrite:{
          '^/api': ''
        },
        // 不能使用 localhost:8080 最为请求 GitHub 的主机名，使用代理请求的地址最为请求的主机名
        changeOrigin: true
      } 
    },
    // 配置热更新
    hot: true,
    // hotOnly: true,
  },
  module: {
    rules: [
      {
        test: /.md$/,
        use: [ //执行顺序从后往前
          'html-loader',
          '../markdown-loader/index',
        ]
      },
      {
        test: /\.css$/,
        use: [
          // 'style-loader', //将样式通过 style 标签导入
          MiniCssExtraPlugin.loader,
          'css-loader'
        ]
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 用于生成index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: './index.html',
      chunks: ["main"] // 指定需要注入的bundle
    }),
    // 用于生成 about.html
    new HtmlWebpackPlugin({
      filename: 'about.html',
      chunks: ["editer"]
    }),
    // 开发阶段最好不要使用这个插件
    new CopyWebpackPlugin({
      patterns: [
        // 'public/**'
        {
          from: 'public',
        },
      ]
    }),
    new MyPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtraPlugin({
      filename: '[name]-[hash].bundle.css',// 只有一个hash值
      filename: '[name]-[chunkhash].bundle.css',// 不同的chunk不同的hash值
      filename: '[name]-[contenthash:8].bundle.css',// 不同的文件不同的hash值，指定hash长度8
    }),
  ]
}
